<template>
  <!-- <van-nav-bar title="首页" :fixed="true" :placeholder="true" /> -->
  <Navbar title="首页" />

  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <van-list
      v-model:loading="loading2"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 轮播图组件 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 导航宫格 -->
      <van-grid column-num="5">
        <van-grid-item
          v-for="item in navList"
          :key="item.navid"
          :icon="item.imgurl"
          :text="item.title"
        />
      </van-grid>

      <!-- 商品列表 -->
      <ul :class="show ? 'ul1' : 'ul2'">
        <li
          v-for="item in proList"
          :key="item.proid"
          @click="goToDetail(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div class="desc">
            <p>{{ item.proname }}</p>
            <span>￥ {{ item.originprice }}</span>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>

  <van-back-top bottom="20vh" />
  <Teleport to="body">
    <div class="box" @click="changeShow">
      <van-icon name="exchange" />
    </div>
  </Teleport>
</template>

<script setup lang="ts">
// import axios from "axios";
// import http from "@/utils/request";
import { homeBannerApi, homeProApi } from "@/api/home";
import { onMounted, ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import Navbar from "@/components/Navbar.vue";

interface BannerItemType {
  bannerid: string;
  img: string;
  [propname: string]: any;
}

interface ProItemType {
  proid: string;
  proname: string;
  img1: string;
  originprice: number;
  [propname: string]: any;
}

// 轮播图功能
const bannerList = ref<BannerItemType[]>([]);
const getBannerList = async () => {
  // axios.get("http://121.89.205.189:3000/api/banner/list").then((res) => {
  //   console.log(res.data);
  //   if (res.data.code === "200") {
  //     bannerList.value = res.data.data;
  //   }
  // });
  // http.get("/api/banner/list").then((res) => {
  //   console.log(res);
  //   if (res.data.code === "200") {
  //     bannerList.value = res.data.data;
  //   }
  // });

  const res = await homeBannerApi();
  res && (bannerList.value = res.data);
};
onMounted(() => {
  getBannerList();
});

// 导航列表
const navList = [
  {
    navid: 1,
    title: "嗨购超市",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
  },
  {
    navid: 2,
    title: "数码电器",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    navid: 3,
    title: "嗨购服饰",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg",
  },
  {
    navid: 4,
    title: "嗨购生鲜",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
  },
  {
    navid: 5,
    title: "嗨购到家",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg",
  },
  {
    navid: 6,
    title: "充值缴费",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg",
  },
  {
    navid: 7,
    title: "9.9元拼",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg",
  },
  {
    navid: 8,
    title: "领券",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg",
  },
  {
    navid: 9,
    title: "领金贴",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg",
  },
  {
    navid: 10,
    title: "plus会员",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg",
  },
];

// 商品功能
let count = ref(1);
const proList = ref<ProItemType[]>([]);
const getProList = async () => {
  const res = await homeProApi({
    count: count.value,
    limitNum: 10,
  });
  res && (proList.value = [...proList.value, ...res.data]);
  loading2.value = false;
  if ((res as any).data.length < 10) {
    finished.value = true;
  }
};
onMounted(() => {
  getProList();
});

// 下拉刷新的功能
// 设置下拉的时候的loading的效果
const loading = ref(false);
const onRefresh = () => {
  // setTimeout(() => {
  //   showToast("刷新成功");
  //   loading.value = false;
  // }, 1000);
  finished.value = false;
  proList.value = [];
  count.value = 1;
  Promise.all([
    homeBannerApi(),
    homeProApi({
      count: count.value,
      limitNum: 10,
    }),
  ]).then((res: any) => {
    bannerList.value = res[0].data;
    proList.value = res[1].data;
    showToast("刷新成功");
    loading.value = false;
  });
};

// 上啦加载功能
const loading2 = ref(true);
// finished如果为true了，就不再做下一次的下拉了
const finished = ref(false);
// 下拉到底的事件
const onLoad = () => {
  // console.log("拉大地了");
  count.value++;
  getProList();
};

// 控制ul列表的展示的效果
const show = ref<boolean>(true);
const changeShow = () => {
  show.value = !show.value;
};

// 跳转详情页
const router = useRouter();
const goToDetail = (id: string) => {
  router.push("/detail/" + id);
};
</script>

<style scoped lang="less">
// @import url("@/assets/css/var.less");

// 可以通过检查的方式，找到对应的类名去修改样式
// 可以会加不动，可以通过:deep()的方式
// :deep(.van-nav-bar) {
//   background-color: @theme-color;
//   .van-nav-bar__title {
//     color: #fff;
//   }
// }

.my-swipe .van-swipe-item {
  height: 200px;

  img {
    width: 100%;
    height: 100%;
  }
}

ul {
  background-color: #fff;
}

.ul1 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

  li {
    width: 175px;
    height: 277px;
    border: 1px solid @border-color;
    margin-top: 10px;

    img {
      width: 100%;
      height: 200px;
    }

    .desc {
      padding: 10px;
      font-size: 12px;

      p {
        .ell2(2);
        margin-bottom: 10px;
      }

      span {
        color: @theme-color;
      }
    }
  }
}

.ul2 {
  li {
    width: 100%;
    height: 100px;
    padding: 10px;
    display: flex;
    font-size: 12px;
    border: 1px solid @border-color;

    img {
      width: 90px;
      height: 90px;
    }

    .desc {
      flex: 1;
    }
  }
}

.box {
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: rgb(25, 137, 250);
  border-radius: 50%;
  bottom: 10vh;
  right: 30px;
  color: #fff;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .center();
}
</style>
